<template>
  <div class="home">
    <!-- 面包屑 -->
    <mbx name1="商品管理" name2="商品列表"></mbx>
    <!-- 卡片区 -->
    <el-card class="mt16">
      <!-- 搜索框 -->
      <el-input
        placeholder="请输入你想要搜索的内容"
        style="width: 350px"
        v-model="shuju.query"
        clearable
        @input="ss"
        @clear="ss"
      >
        <template #append>
          <el-button :icon="Search" @click="getlist" />
        </template>
      </el-input>
      <!-- 搜索框 -->
      <!-- 添加按钮 -->
      <el-button
        type="primary"
        style="margin-left: 15px"
        @click="$router.push('/goodsadd')"
        >添加用户</el-button
      >
      <!-- 添加按钮 -->
      <!-- 表格区 -->
      <el-table :data="user" border style="width: 100%" class="mt16">
        <el-table-column fixed type="index" label="#" width="50">
        </el-table-column>
        <el-table-column prop="goods_name" label="商品名称" width="380">
        </el-table-column>
        <el-table-column prop="goods_price" label="商品价格(元)">
        </el-table-column>
        <el-table-column prop="goods_weight" label="商品重量">
        </el-table-column>
        <el-table-column label="创建时间" width="250">
          <template #default="scope">
            <span>{{ filters(scope.row.add_time) }}</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="220">
          <template #default="scope">
            <el-button
              @click="edit(scope.row)"
              type="primary"
              size="small"
              :icon="Edit"
              >编辑</el-button
            >
            <el-button
              type="danger"
              size="small"
              :icon="Delete"
              @click="del(scope.row.goods_id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 表格区 -->
      <!-- 分页器 -->
      <el-pagination
        v-model:currentPage="shuju.pagenum"
        v-model:page-size="shuju.pagesize"
        :page-sizes="[5, 10, 15, 20]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
  </div>
</template>

<script>
import { toRefs, reactive, onMounted } from "vue";
import { goodslist, delgoods } from "../http/api.js";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import { Search, Edit, Delete } from "@element-plus/icons-vue";
// 引入moment
import Moment from "moment";
import _ from "lodash";
export default {
  setup(props) {
    //   路由
    const router = useRouter();
    const obj = reactive({
      user: [], //存放的数据
      shuju: {
        query: "",
        pagenum: 1,
        pagesize: 5,
      },
      total: 0,
      dialogFormVisible1: false,
      form1: {},
    });
    onMounted(() => {
      getlist();
    });
    // 渲染数据
    const getlist = async () => {
      const res = await goodslist(obj.shuju);
      console.log("商品列表的数据", res);
      obj.user = res.goods;
      obj.total = res.total;
    };
    // 过滤器  v3里面过滤器已经取消掉了
    function filters(a) {
      return Moment(a * 1000).format("YYYY-MM-DD HH:MM:SS");
    }
    // 搜索 防抖
    const ss = _.debounce(function () {
      getlist();
    }, 300);
    // 改变每页条数
    const handleSizeChange = (val) => {
      console.log(`${val} items per page`);
      obj.shuju.pagesize = val;
      getlist();
    };
    const handleCurrentChange = (val) => {
      console.log(`current page: ${val}`);
      obj.shuju.pagenum = val;
      getlist();
    };
    // 删除
    const del = (id) => {
      ElMessageBox.confirm("您确定要删除它吗?", "Warning", {
        confirmButtonText: "OK",
        cancelButtonText: "Cancel",
        type: "warning",
      })
        .then(async () => {
          const res = await delgoods(id);
          console.log("删除", res);
          getlist();
        })
        .catch(() => {
          ElMessage({
            type: "info",
            message: "Delete canceled",
          });
        });
    };
    const edit = (row) => {
      console.log("rowedie", row);
      router.push({
        path: "/goodsedit",
        query: { row: JSON.stringify(row) },
      });
    };
    return {
      ...toRefs(obj),
      filters,
      ss,
      Search,
      handleSizeChange,
      handleCurrentChange,
      del,
      Edit,
      Delete,
      edit,
    };
  },
};
</script>
<style lang="scss" scoped></style>
